import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//导入拆分的模块
import common from "./modules/common"
import user from "./modules/user"
export default new Vuex.Store({
  //状态，在mvvm框架中 数据源就称为状态
  //数据统一管理，含义就是数都会放在state中
  state: {
    username: "zhangsan",
    age: 50,
    //性别
    //gender：社交属性的性别
    //sex：生理属性的性别
    gender: 0,
  },
  //修改状态的方法 (同步)
  mutations: {
    // 更改用户名的方法，每个方法有2个形参：
        // state：state状态对象
        // arg：（可选）影响数据修改的变量
        setUsername(state, arg) {
          state.username = arg;
  },
   // 更改年龄的方法（调用一次+arg）
   setAge(state, arg) {
    // setTimeout(() => {
    state.age += arg;
    // }, 10000);
},
  },
// 修改状态的方法（异步）
    // 虽然actions里写的是异步修改状态的方法，但是最终的数据修改依旧是muations做的，所以actions中的异步修改方法都要有一个与之对应的mutations方法
  actions: {
     // 每个异步的修改方法都有最少1个最多2个形参
        // context：上下文对象（store对象）
        // arg：可选）影响数据修改的变量
        setUsernameAsync(context, arg) {
          setTimeout(() => {
              // 异步代码最终还是通过mutation进行对数据的更改
              context.commit("setUsername", arg);
          }, 1000);
      },
      setAgeAsync(context, arg) {
          setTimeout(() => {
              context.commit("setAge", arg);
          }, 1000);
      },
  },
  // 对于数据源的加工和处理，有点类似于vue组件中的过滤器
  getters: {
    // getters里面的方法形参只有一个：state
    // 每个方法需要返回处理好的数据
    parseGender(state) {
        return state.gender == 0 ? "男" : "女";
    },
},
  modules: {
       // 注册各个模块
       common,
       user,
  }
});
